<template>
  <div class="login-page">
    <!-- <img src="../../assets/images/login.png" alt="" /> -->
    <ApplicationNav></ApplicationNav>
    <div class="login-box">
      <div class="login-top">
        <svg-icon class="login-hi" icon-class="login-hi"></svg-icon>
        欢迎登录！
      </div>
      <article>v3-ts-vite2-project</article>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
        <el-form-item prop="loginName">
          <el-input type="text" v-model="loginForm.loginName" placeholder="请输入账号" autocomplete="off">
            <template #prefix>
              <svg-icon icon-class="account"></svg-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input type="password" placeholder="请输入密码" v-model="loginForm.pwd" autocomplete="off" show-password>
            <template #prefix>
              <svg-icon icon-class="password"></svg-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="submitForm('loginFormRef')" @keyup.enter="submitForm('loginFormRef')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { InjectionKey, ComputedRef, ComponentInternalInstance, ComponentPublicInstance, Ref, onUnmounted } from 'vue'
  import { nextTick, onMounted, reactive, ref, unref, watchEffect, getCurrentInstance, toRefs, computed } from 'vue'
  import { useStore } from 'store/index'
  import { useRoute, useRouter } from 'vue-router'
  import { slice } from 'lodash'
  
  interface loginForm {
    loginName: string
    pwd: string
    type: number
  }

  const validateUsername = function (rule: object, value: string | number, callback: Function) {
    if (value === '') {
      callback(new Error('请输入用户名'))
    } else {
      callback()
    }
  }
  const validatePass = function (rule: object, value: string, callback: Function) {
    if (value === '') {
      callback(new Error('请输入密码'))
    } else {
      callback()
    }
  }
  const name = computed(() => loginForm.loginName)
  console.log(computed, name, 888);
  
  const instance = getCurrentInstance() as ComponentInternalInstance
  const route = useRoute()
  const router = useRouter()
  const store = useStore()
  const loginFormRef = ref<Ref | null>(null)
  const loginForm = reactive<loginForm>({
    loginName: '',
    pwd: '',
    type: 1
  })
  
  const rules = reactive({
    loginName: [
      {
        validator: validateUsername,
        trigger: 'blur'
      }
    ],
    pwd: [{ validator: validatePass, trigger: 'blur' }]
  })
  const submitForm = (formName?: string) => {
    loginFormRef.value.validate((valid: boolean) => {
      // if (valid) {
      //   console.log('submit!', unref(loginForm))
      //   loading.value = true
      //   store
      //     .dispatch('app/login', { ...unref(loginForm) })
      //     .then((res) => {
      //       console.log(res)
      //       loading.value = false
      //       router.push({ path: '/notice/messageNotice' })
      //     })
      //     .catch((err) => {
      //       loading.value = false
      //       console.log(err)
      //       // router.push({ path: '/workBench' })
      //     })
      // } else {
      //   console.log('error submit!!')
      //   return false
      // }
      console.log(store.state)

      router.push({ path: '/notice/messageNotice' })
    })
  }
  const loading = ref<boolean>(false)
  const resetForm = (formName: string) => {
    loginFormRef.value.resetFields()
  }

  const keyDown = (e: any) => {
    if (e.keyCode === 13) {
      submitForm()
    }
  }
  onMounted(() => {
    window.addEventListener('keydown', keyDown)
  })
  onUnmounted(() => {
    window.removeEventListener('keydown', keyDown, false)
  })
</script>
<style lang="scss" scoped>
  @import '@/styles/index.scss';
  .login-page {
    width: 100%;
    height: 100%;
    padding: 64px 293px 113px 189px;
    // background: no-repeat url('@/assets/icons/login-bg.svg') 100%;
    @include flex-wrap;
    > img {
      width: 46.5%;
    }
    .login-box {
      width: 34.2%;
      height: 445px;
      background: #ffffff;
      border-radius: 16px;
      padding: 31px 52px 54px 58px;
      .login-top {
        font-size: 20px;
        font-weight: 400;
        color: #c1cac7;
        line-height: 28px;
        letter-spacing: 1px;
        .login-hi {
          width: 20px !important;
          height: 20px !important;
        }
      }
      > article {
        margin-top: 22px;
        font-size: 24px;
        font-weight: 600;
        color: #666666;
        line-height: 40px;
        display: inline-block;
        // white-space: nowrap;
      }
      > span {
        font-size: 20px;
        margin-top: 22px;
        font-weight: 600;
        color: #666666;
        line-height: 40px;
        white-space: nowrap;
      }
      ::v-deep .el-form {
        width: 100%;
        .el-input {
          .el-input__inner {
            height: 40px;
            line-height: 40px;
            background: #f0f6f4;
            border-radius: 20px;
            padding-left: 51px;
          }
          .el-input__prefix {
            left: 18px;
          }
          .el-input__suffix {
            .el-input__icon {
              line-height: 40px;
            }
          }
          .svg-icon {
            width: 21px !important;
            height: 24px !important;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
          input::-webkit-input-placeholder {
            color: #999999;
          }
        }
        .el-form-item {
          width: 92.1%;
          &:first-child {
            margin-top: 12%;
          }
          &:nth-child(2) {
            margin-top: 12%;
          }
          &:last-child {
            margin-top: 12%;
            .el-button {
              width: 100%;
              background: #2b92be;
              border-radius: 20px;
              height: 40px;
              font-size: 20px;
              font-weight: 400;
              color: #ffffff;
              // line-height: 40px;
              letter-spacing: 1px;
            }
          }
        }
      }
    }
  }
</style>
